<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,  initial-scale=1.0">
<title>文章管理</title>
<script type="text/javascript"  src="${pageContext.request.contextPath }/resource/js/jquery-3.2.1.js"></script>
<script type="text/javascript"  src="${pageContext.request.contextPath }/resource/js/bootstrap.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath }/resource/css/bootstrap.css">
</head>
<body>
	
	 div class="container">
     
                <form action="${pageContext.request.contextPath }/admin/articles" method="post">
                      文章审核状态：
                      <input type="radio" name="status" value="0"  ${article.status==0?"checked":"" }>待审
                      <input type="radio" name="status" value="1"  ${article.status==1?"checked":"" }>已审
                      <input type="radio" name="status"  value="-1" ${article.status==-1?"checked":"" }>驳回
                      <input type="radio" name="status" value="2"  ${article.status==null||article.status==2?"checked":"" }>全部
                      <input type="button" onclick="query()"  value="查询">               
                </form>
                
                <table class="table">
                      <tr>
                           <td>序号</td>
                           <td>文章标题</td>
                           <td>作者</td>
                           <td>发布时间</td>
                           <td>所属栏目</td>
                           <td>所属分类</td>
                           <td>热门</td>
                           <td>状态</td>
                           <td>操作</td>
                      </tr>
                      
                      <c:forEach items="${info.list}"  var="article" varStatus="i">
                           <tr>
                                 <td>${i.count }</td>
                                 <td>${article.title }</td>
                                 <td>${article.userName }</td>
                                 <td><fmt:formatDate  value="${article.created }" pattern="yyyy-MM-dd"/></td>
                                 <td>${article.channelName }</td>
                                 <td>${article.categoryName  }</td>
                                 <td>
                                      <c:if  test="${article.hot==0 }">
                                            <input type="button"  class="btn btn-success" onclick="updateHot('${article.id}',this)"  value="否">
                                      </c:if>
                                      <c:if  test="${article.hot==1 }">
                                            <input type="button"  class="btn btn-danger" onclick="updateHot('${article.id}',this)"  value="是">
                                      </c:if>
                                 </td>
                                 <td>${article.status==1?"已审核":article.status==0?"未审核":"审核未通过" }</td>
                                 <td>
                                      <button type="button"  onclick="detail(${article.id})" class="btn btn-primary"  data-toggle="modal" data-target="#exampleModal" >详情</button>
                                 </td>
                           </tr>
                      </c:forEach>
                </table>
                
                      
                
           
           <!-- 加载分页页面 -->
           <jsp:include  page="/WEB-INF/view/common/pages.jsp"></jsp:include>
           
     </div>
     
     
     <!-- 文章详情的模态框 -->
     <div class="modal fade" id="exampleModal" tabindex="-1"  role="dialog" aria-labelledby="exampleModalLabel"  aria-hidden="true">
       <div class="modal-dialog">
         <div class="modal-content">
           <div class="modal-header">
             <h5 class="modal-title" id="exampleModalLabel"></h5>
             <button type="button" class="close"  data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
             </button>
           </div>
           <div class="modal-body" id="content">
                
           </div>
           <div class="modal-footer">
                <button type="button" class="btn btn-success"  onclick="update(1)">同意</button>
                <button type="button" class="btn btn-primary"  onclick="update(-1)">驳回</button>
             <button type="button" class="btn btn-secondary"  data-dismiss="modal">关闭</button>
           </div>
         </div>
       </div>
     </div>
</body>
<script type="text/javascript">

var articleId = "";
//查询文章详情
function detail(id){
      
      //将文章id赋值给全局变量
      articleId = id;
      
      //使用ajax查询数据
      $.post(
           "${pageContext.request.contextPath }/my/detail",
           {id:id},
           function(article){
                 //展示数据
                 //设置标题
                 $("#exampleModalLabel").html(article.title);
                 
                 //设置内容
                 $("#content").html(article.content);
                 
           }
      )
}

//分页
function goPage(pageNum){
      
      //获取form表单中的查询数据
      
      //location="/admin/articles?pageNum="+pageNum + "&" +  $("form").serialize();
      //整合管理员中心首页以后
      $("#center").load("${pageContext.request.contextPath }/admin/articles?pageNum="+pageNum +  "&" + $("form").serialize());
}

//查询文章
function query(){
      
      $("#center").load("${pageContext.request.contextPath }/admin/articles?"+  $("form").serialize());
}

//修改文章状态
function update(status){
      
      //使用ajax异步修改状态
      $.post(
           "${pageContext.request.contextPath }/admin/update",
           {status:status,id:articleId},
           function(result){
                 
                 if(result){
                      //修改成功
                      //location="/admin/articles";
                      
                      //重新加载页面
                      window.location.reload();
                 }else{
                      alert("审核失败");
                 }
           }
      )
}

//修改热门状态
function updateHot(id,obj){
      //获取按钮显示的文字，根据文字，获取要修改成的热门状态
      var hot = $(obj).val()=="是"?0:1;
      
      //使用ajax修改
      $.post(
           "${pageContext.request.contextPath }/admin/update",
           {id:id,hot:hot},
           function(result){
                 
                 if(result){
                      //修改按钮的文字和样式
                      if($(obj).val()=="是"){
                            //将文字修改
                            $(obj).val("否");
                            
                            //修改按钮样式
                            $(obj).removeClass("btn-danger");
                            $(obj).addClass("btn-success");
                      }else{
                            
                            //如果原来不是热门
                            $(obj).val("是");
                            
                            //修改按钮样式
                            $(obj).removeClass("btn-success");
                            $(obj).addClass("btn-danger");
                      }
                      
                 }else{
                      alert("修改失败");
                 }
                 
           }
      )
      
}
</script>

</html>